<script>
  import addtable from '@/mixins/addtable'
  import AjaxStore from '@/utils/store/proxyAjax'
  import store from './store.js'

  export default {
    name: 'logonLog',
    mixins: [addtable, store],
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.searchModel.logonTime = vm.formatDefaultTime()
        vm.handleSearchParams(vm.searchModel)
      })
    },
    data() {
      return {
        selectedList: [],
        tableOptWidth: '60',
				dialogType: '',
        idKey: 'logId',
        delIdKey: 'logId',
        delListIdKey: 'logIds',

        addUrl: '/v1/sys/logonlog/add',
        updateUrl: '/v1/sys/logonlog/update',
        delUrl: '/v1/sys/logonlog/delete',
        delListUrl: '/v1/sys/logonlog/deleteList',
        exportUrl: '/v1/sys/logonlog/exportExcel',
        url: '/v1/sys/logonlog/query',
        store: new AjaxStore({
          url: '/v1/sys/logonlog/query'
        }),
        columns: [
           { prop: "userNo", label: "用户编号", sortable: true, width: "110", 'show-overflow-tooltip': true, 'header-align': 'center' },
           { prop: "userName", label: "用户名称", sortable: true, width: "110", 'show-overflow-tooltip': true, 'header-align': 'center' },
           { prop: "password", label: "密码", sortable: true, 'min-width': "180", 'show-overflow-tooltip': true, 'header-align': 'center' },
           { prop: "ip", label: "IP地址", sortable: true, width: "128", 'header-align': 'center' },
           { prop: "logonTime", label: "登录时间", sortable: true, width: "155", 'header-align': 'center' },
           { prop: "logoffTime", label: "下线时间", sortable: true, width: "155", 'header-align': 'center' }
        ],
        searchFields: [
          { label: '用户名称', prop: 'userName', placeholder: '输入用户名称', anchor: 9 },
          { label: 'IP地址', prop: 'ip', placeholder: '输入IP地址', anchor: 12 },
          { label: '登录时间', prop: 'logonTime', anchor: 24, xType: 'SelectTimeRange.datetimerange', defaultTime: ['00:00:00', '23:59:59'] }
		    ],
        searchModel: {
          "userName": '',
          "ip": '',
          "logonTime": ''
		    },

        searchBtnList: this.searchBtns,
        toolPanelBtnList: this.toolPanelBtns,
        tableRowBtnList: this.tableRowBtns,
        formPanel: {
          add: {
            model: {
           		"projectId": '',
           		"userNo": '',
           		"userName": '',
           		"password": '',
           		"ip": '',
           		"logonTime": '',
           		"logoffTime": ''            },
            fields: [
        		{ label: '项目ID', prop: 'projectId', placeholder: '输入项目ID', anchor: 24},
        		{ label: '用户编号', prop: 'userNo', placeholder: '输入用户编号', anchor: 24},
        		{ label: '用户名称', prop: 'userName', placeholder: '输入用户名称', anchor: 24},
        		{ label: '密码', prop: 'password', placeholder: '输入密码', anchor: 24},
        		{ label: 'IP地址', prop: 'ip', placeholder: '输入IP地址', anchor: 24},
        		{ label: '登录时间', prop: 'logonTime', placeholder: '输入登录时间', anchor: 24},
        		{ label: '下线时间', prop: 'logoffTime', placeholder: '输入下线时间', anchor: 24}            ],
            rules: {
               "userNo": [{ required: true, message: '请输入用户编号', trigger: 'blur' }],
               "userName": [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
               "password": [{ required: true, message: '请输入密码', trigger: 'blur' }],
               "ip": [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
               "logonTime": [{ required: true, message: '请输入登录时间', trigger: 'blur' }],
            },
            title: '新增登录日志',
            type: 'ADD',
            ref: 'addForm',
            submitBtnList: [
              { label: '保存并新增', methods: 'handleSubmitAndAdd', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
              { label: '保存', methods: 'handleAddSubmit', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
              { label: '取消', methods: 'handleCancel', icon: 'el-icon-circle-close-outline', disabled: false }
            ]
          },
          edit: {
            model: {
          	 "projectId": '',
          	 "userNo": '',
          	 "userName": '',
          	 "password": '',
          	 "ip": '',
          	 "logonTime": '',
          	 "logoffTime": ''            },
            fields: [
       			 { label: '项目ID', prop: 'projectId', placeholder: '输入项目ID', anchor: 24},
       			 { label: '用户编号', prop: 'userNo', placeholder: '输入用户编号', anchor: 24},
       			 { label: '用户名称', prop: 'userName', placeholder: '输入用户名称', anchor: 24},
       			 { label: '密码', prop: 'password', placeholder: '输入密码', anchor: 24},
       			 { label: 'IP地址', prop: 'ip', placeholder: '输入IP地址', anchor: 24},
       			 { label: '登录时间', prop: 'logonTime', placeholder: '输入登录时间', anchor: 24},
       			 { label: '下线时间', prop: 'logoffTime', placeholder: '输入下线时间', anchor: 24}            ],
            rules: {
         	   "userNo": [{ required: true, message: '请输入用户编号', trigger: 'blur' }],
         	   "userName": [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
         	   "password": [{ required: true, message: '请输入密码', trigger: 'blur' }],
         	   "ip": [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
         	   "logonTime": [{ required: true, message: '请输入登录时间', trigger: 'blur' }],
            },
            title: '编辑登陆日志',
            type: 'EDIT',
            ref: 'editForm',
            submitBtnList: [
              { label: '保存', methods: 'handleEditSubmit', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
              { label: '取消', methods: 'handleCancel', icon: 'el-icon-circle-close-outline', disabled: false }
            ]
          },
          look: {
            model: {
          	    "projectId": '',
          	    "userNo": '',
          	    "userName": '',
          	    "password": '',
          	    "ip": '',
          	    "logonTime": '',
          	    "logoffTime": ''            },
            fields: [
          		{ label: '项目ID', prop: 'projectId', placeholder: '', anchor: 24, disabled: true },
          		{ label: '用户编号', prop: 'userNo', placeholder: '', anchor: 24, disabled: true },
          		{ label: '用户名称', prop: 'userName', placeholder: '', anchor: 24, disabled: true },
          		{ label: '密码', prop: 'password', placeholder: '', anchor: 24, disabled: true },
          		{ label: 'IP地址', prop: 'ip', placeholder: '', anchor: 24, disabled: true },
          		{ label: '登录时间', prop: 'logonTime', placeholder: '', anchor: 24, disabled: true },
          		{ label: '下线时间', prop: 'logoffTime', placeholder: '', anchor: 24, disabled: true }            ],
            rules: {
            },
            title: '查看登录日志',
            type: 'LOOK',
            ref: 'lookForm',
            submitBtnList: [
              { label: '保存', methods: '', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: true },
              { label: '取消', methods: 'handleCancel', icon: 'el-icon-circle-close-outline', disabled: false }
            ]
          }
        }
      }
    },
    methods: {
      handleSearchParams(data) {
        for(const k in data){
          if (data.hasOwnProperty(k)) {
            if('logonTime' != k){
              this.store._searchParams['q_' + k] = data[k]
            } else{
                this.store._searchParams['q_startLogonTime'] = !!data[k] && 2 == data[k].length ? data[k][0] : ''
                this.store._searchParams['q_endLogonTime'] = !!data[k] && 2 == data[k].length ? data[k][1] : ''
            }
          }
        }
      },
      handleSearch(data) {
        if(data) {
          this.handleSearchParams(data)
          this.$refs.table.load(1, this.store.limit)
        }
      },
      handleExportExcel() {
        const params = {}
        if (this.searchModel) {
          for (const k in this.searchModel) {
            if (this.searchModel.hasOwnProperty(k)) {
              if ('userName' === k || 'ip' === k) {
                !!this.searchModel[k] ? params['q_' + k] = this.searchModel[k] : ''
              } else if ('logonTime' === k) {
                !!this.searchModel[k] && 2 == this.searchModel[k].length ? params['q_startLogonTime'] = this.searchModel[k][0] : ''
                !!this.searchModel[k] && 2 == this.searchModel[k].length ? params['q_endLogonTime'] = this.searchModel[k][1] : ''
              }
            }
          }
          this.exportExcel(params).then((res) => {
            console.log('下载完成！')
          }).catch((error) => {
            console.log(error)
          })
        }

      }
    },
    beforeCreate() {
      // 根据页面路由找出有权限访问的 url 数组
      const urlArr = (this.$route.meta && this.$route.meta.children || []).map(item => item.url)

      // 根据权限 url 数组过滤出能够使用的 按钮数组
      this.searchBtns = [
        { label: '查询', methods: 'handleSearch', url: '/v1/sys/logonlog/query', icon: 'el-icon-search', type: 'primary', disabled: false },
        { label: '重置', methods: 'handleSearchReset', url: '', icon: 'el-icon-refresh', type: 'warning', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

      this.toolPanelBtns = [
        { label: '删除', methods: 'handleDelGroup', url: '/v1/sys/logonlog/deleteList', icon: 'el-icon-delete', type: 'danger', disabled: false },
        { label: '导出', methods: 'handleExportExcel', url: '/v1/sys/logonlog/exportExcel', svgIcon: 'export', type: 'export', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

      this.tableRowBtns= [
        { label: '删除', methods: 'handleDelete', url: '/v1/sys/logonlog/delete', icon: 'el-icon-delete', type: 'danger', key: 'delete', align: 'top-start', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)
    },
    created() {
      this.searchModel.logonTime = this.formatDefaultTime()
      this.handleSearchParams(this.searchModel)
    }
  }
</script>

<style lang="scss">
  .logonLog{
    .searchPanel{
      padding-bottom: 0;
      .search-btn-box{
        bottom: 0;
      }
    }
  }
</style>
